import React, { useState } from'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet, useLocation } from'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

function getItem(label, key, children) {
  return {
    key,
    children,
    label,
  };
}

const menuItems = [
  getItem(<NavLink to={'/home/index'}>首页</NavLink>, '1'),
  getItem(<NavLink to={'/home/user'}>列表</NavLink>, '2'),
];

const breadcrumbItems = [
  {
    key: 'user',
    label: 'User',
  },
  {
    key: 'bill',
    label: 'Bill',
  },
];

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const getSelectedKey = () => {
    if (location.pathname === '/home/index') {
      return '1';
    } else if (location.pathname === '/home/user') {
      return '2';
    }
    return '1';
  };

  const selectedKey = getSelectedKey();

  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          selectedKeys={[selectedKey]}
          mode="inline"
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
            items={breadcrumbItems}
          />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;